<template>
  <div style="height: 100%;">
    <div class="box-card">
      <div class="clearfix">
        <img src="@/assets/imgs/main_logo.png" alt="logo" />
      </div>
      <div class="info">
        <el-avatar icon="el-icon-user" style="cursor: pointer" />
        <div class="info-text">
          <div>张三</div>
          <div>杭州运营数据中心（杭州）</div>
        </div>
        <div class="callback-btn" @click="loginOut">退出</div>
      </div>
    </div>
    <div class="con">
        <!-- <div style="background: #f2f2f2;height: 90%;"> -->
      <div style="background: #f2f2f2;">
        <div class="card">
          <div class="customer-manager">
            <p>您的专属客户经理</p>
            <div class="manager-info">
              <el-avatar icon="el-icon-user-solid" :size="50"/>
              <div>
                <p>黑猫</p>
                <p style="color: #666">工号：123456</p>
              </div>
            </div>
            <div class="consult-button">1V1咨询</div>
            <p style="color: #666">服务热线：400-8888-8888</p>
          </div>
        </div>
      </div>
      <div class="core">
        <router-view />
      </div>
      <div class="info"></div>
      <div style="width: 12rem;height: 12rem;"
        class="fixed bottom-6 flex flex-col items-center p-3 bg-white rounded-full shadow-xl cursor-pointer hover:scale-105 transition duration-300 z-20">
        <img alt="AI Customer Service" class="w-28 h-28 object-contain mb-1" src="@/assets/imgs/kf.png"
          style="width: 8rem; height: 8rem;margin-top: -20%;" />
        <span class="text-gray-700 text-[12px] font-semibold"> AI客服 </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { useTagsViewStore } from '@/store/modules/tagsView'

const userStore = useUserStore()
const tagsViewStore = useTagsViewStore()
const { t } = useI18n()
const router = useRouter()

const loginOut = async () => {
  try {
    await ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
      confirmButtonText: t('common.ok'),
      cancelButtonText: t('common.cancel'),
      type: 'warning'
    })
    await userStore.loginOut()
    tagsViewStore.delAllViews()
    router.push('/login?redirect=/index')
  } catch { }
}
</script>

<style scoped lang="less">
.card {
  background: white;
  // border-radius: 12px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  /* 新增：去除链接下划线 */
  border: 1px solid #ccc;
}

.card:hover {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover-lift {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
}

/* 以下样式保持不变 */
.module-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.module-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.module-info {
  flex: 1;
}

.module-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #000;
}

.module-desc {
  font-size: 12px;
  color: #6b7280;
}

.box-card {
  width: 100vw;
  height: 72px;
  display: flex;
  justify-content: space-between;
  align-self: center;
  background-color: #fff;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .clearfix {
    width: 300px;
    height: 70px;
    display: flex;
    align-items: center;

    img {
      width: 170px;
      height: 40px;
    }
  }

  .info {
    display: flex;
    align-items: center;

    .info-text {
      font-size: 12px;
      color: #6b7280;
      margin-left: 12px;
    }
  }
}

.con {
  display: flex;

  .card {
    width: 300px;
    margin: 0 20px 20px 0;
    padding: 20px;
  }

  .customer-manager {
    text-align: left;
  }

  .manager-info {
    display: flex;
    align-items: center;
    justify-content: left;
    margin: 16px 0;
  }

  .manager-info .el-avatar {
    margin-right: 10px;
  }

  .consult-button {
    width: 100%;
    margin: 10px 0;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 3px 0;
    text-align: center;
  }

  .info {
    width: 330px;
    background: #f2f2f2;
  }
}

.core {
  background-color: #fff;
  width: 100%;
  min-height: 700px;
  border: 1px solid #ccc;
  border-bottom: none;
}

.callback-btn {
  font-size: 12px;
  color: #6b7280;
  padding: 0 20px 0 10px;
  cursor: pointer;
}

.bottom-6 {
  bottom: 5rem;
  right: 1rem;

}
</style>
